.face {
  position: absolute;
  transform-style: preserve-3d;
  fill: var(--bg);
  stroke: black;
  stroke-width: 1;
  overflow: visible;
}

.base,
.top {
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  top: calc(50% - var(--radius));
  left: calc(50% - var(--radius));
}

.base {
  translate: 0 0 calc(var(--height) / -2);
}

.top {
  translate: 0 0 calc(var(--height) / 2);
}

.side {
  position: absolute;
  transform: rotateY(-90deg);
  background-color: var(--bg);
  border: 1px solid black;
}

.spoke {
  height: 2px;
  top: -1px;
  translate: 0 0 calc(var(--height) / -2);
}
